<template>
  <div class="app-container home">
    <div>
      <el-form :inline="true" :model="formInline" class="">
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="formInline.projectName" clearable placeholder="请输入" size="small"></el-input>
        </el-form-item>
        <el-form-item label="报告名称" prop="reportName">
          <el-input v-model="formInline.reportName" clearable placeholder="请输入" size="small"></el-input>
        </el-form-item>
        <el-form-item label="机型" prop="aircraftType">
          <el-select v-model="formInline.aircraftType" clearable>
            <el-option v-for="(item,index) in aircraftTypes" :key="'aircraftType'+index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="bdf文件" prop="bdfFile">
          <el-input v-model="formInline.bdfFile" clearable placeholder="请输入" size="small"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="项目描述" prop="projectDesc">
          <el-input v-model="formInline.projectDesc" clearable placeholder="请输入" size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" size="small">搜索</el-button>
          <el-button type="primary" plain @click="handleReset" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <div class="btn">
      <el-button type="primary" size="small" @click="handleAdd">新增</el-button>
    </div> -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" type="index" width="50">
      </el-table-column>
      <el-table-column prop="projectName" label="项目名称"> </el-table-column>
      <el-table-column label="报告名称">
        <template slot-scope="scope">
          <span> {{ scope.row?.bindReport?.docName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="aircraftType" label="项目机型"> </el-table-column>
      <el-table-column prop="bdfFileName" label="BDF文件名称"> </el-table-column>
      <el-table-column prop="description" label="项目描述"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="bindReport.status" label="状态">
        <template slot-scope="scope">
          <span  v-if="!scope.row?.bindReport">报告未生成</span>
         <span style="color:red" v-if="scope.row?.bindReport?.status==0 || scope.row?.bindReport?.status==9">报告生成中</span>
         <span style="color:green" v-if="scope.row?.bindReport && !(scope.row?.bindReport?.status==0 || scope.row?.bindReport?.status==9)">报告已生成</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="text" @click="generateReport(scope.row)" :disabled="(scope.row?.bindReport != null)">生成报告</el-button>
          <el-button type="text" @click="editReport(scope.row)" :disabled="(!scope.row?.bindReport?.docNo) || (scope.row?.bindReport?.status==0 || scope.row?.bindReport?.status==9)">编辑报告</el-button>
          <el-button type="text" @click="viewReport(scope.row)" :disabled="(!scope.row?.bindReport?.docNo) || (scope.row?.bindReport?.status==0 || scope.row?.bindReport?.status==9)">查看报告</el-button>
          <el-button type="text" @click="deleteReport(scope.row)" :disabled="(!scope.row?.bindReport?.docNo) || (scope.row?.bindReport?.status==9)">删除报告</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination class="p20 fr" v-if="total > 0" :background="true" :current-page.sync="queryParams.pageNum"
      :page-size.sync="queryParams.pageSize" :layout="'total, sizes, prev, pager, next, jumper'"
      :page-sizes="[15, 30, 45, 60]" :total="total" @size-change="handleSizeChange"
      @current-change="handlepageNumChange" />
    <GenerateReport :datas="datas" v-if="dialogVisible" :type="type" @on-close="handleDialogClose"
      @on-sure="onSearch" />
  </div>
</template>

<script>
import qs from "qs";
import { deleteReport, getReportList, getAlgoTree } from "@/api/computingConfig.js";
import GenerateReport from "./component/GenerateReport.vue";
export default {
  name: "reportList",
  components: { GenerateReport },
  data() {
    return {
      formInline: {
        projectName: "",
        aircraftType: "",
        bdfFile: "",
        projectDesc:"",
        reportName:""
      },
      queryParams: {
        pageNum: 1,
        pageSize: 15,
      },
      loading: false,
      total: 0,
      tableData: [],
      dialogVisible: false,
      datas: {},
      type: "add",
      computingTypeList: [],
      symbolVisible: false,
      dateRange: null,
      allDatas:[],
      aircraftTypes: [
          {
            label: 'C909',
            value: 'C909'
          },
          {
            label: 'C919',
            value: 'C919'
          },
          {
            label: 'C929',
            value: 'C929'
          }
        ],
    };
  },
  methods: {
    async onSearch() {
      try {
        this.loading = true;
        let startTime = "";
        let endTime = "";
        if(this.dateRange){
          startTime=new  Date(this.dateRange[0]).toDateString();
          endTime=new Date(this.dateRange[1]).toDateString();
        }
        const res = await getReportList({ projectType: 'common' ,...this.formInline,beginDate:startTime,endDate:endTime});
        this.total = res.data.length;
        this.allDatas = res.data;
        this.tableData = res.data.slice(0,15);
      } catch (error) {
        console.debug(error);
      } finally {
        this.loading = false;
      }
    },
    handleReset() {
      this.formInline = {
        keyword: "",
        variableCode: "",
        variableNamespace: "",
        variableType: "",
      };
      this.onSearch();
    },
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.onSearch();
    },
    handleSizeChange(val) {
      console.log(this.queryParams)
      console.log(this.allDatas)
      if (this.queryParams.pageSize * val > this.total) {
        this.queryParams.pageNum = 1;
      }
      this.tableData = this.allDatas.slice((this.queryParams.pageNum-1)* this.queryParams.pageSize,this.queryParams.pageNum* this.queryParams.pageSize)
    },
    handlepageNumChange() {
      console.log(this.queryParams)
      console.log(this.allDatas)
      this.tableData = this.allDatas.slice((this.queryParams.pageNum-1)* this.queryParams.pageSize,this.queryParams.pageNum* this.queryParams.pageSize)
    },
    // 生成报告
    generateReport(row) {
      // 已经生成报告，则不能再生成
      if (row?.docNo) {
        this.$message.warning("报告已生成，不能再次生成报告！");
        return;
      }
      this.datas = row;
      this.dialogVisible = true;
    },
    // 编辑报告
    async editReport(row) {
      //查询算例列表
      const algos = row?.bindReport?.algoResultSelectList || [];
      const res = await getAlgoTree({
        projectId: row.projectId
      });
      let paramsId = [];
      if (res?.data) {
        await res.data.forEach(async (item) => {
          await algos.forEach(el => {
            if (el.algoCode == item.algoCode) {
              paramsId.push(item?.algoConfigInfo?.id)
            }
          })
        })
      }
      const query = qs.stringify({
        docNo: row?.bindReport?.docNo,
        editContentType: "document",
        algos: paramsId.toString(),
        docStatus:row?.bindReport?.status
      });
      window.open(`/editor/view?` + query, "_blank");
    },
    // 查看报告
    viewReport(row) {
      // 跳转到文章编辑页面
      const query = qs.stringify({
        docNo: row?.bindReport?.docNo || "",
        editContentType: "document",
        entry: "preview"
      });
      window.open(`/editor/view?` + query, "_blank");
    },
    // 删除
    deleteReport(row) {
      if (row?.bindReport?.docNo) {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteReport(row?.bindReport?.docNo).then((res) => {
              this.$message({ type: "success", message: "删除成功!" });
              this.handleSearch();
            });
          })
          .catch(() => {
            this.$message({ type: "info", message: "已取消删除" });
          });
      } else {
        this.$message({ type: "info", message: "该项目暂无报告！" });
      }

    },
    handleDialogClose() {
      this.dialogVisible = false;
      this.handleSearch();
    },
    handleSymbolClose() {
      this.symbolVisible = false;
    },
  },
  mounted() {
    this.handleSearch();
  },
};
</script>
<style scoped>
.btn {
  padding-bottom: 16px;
}
</style>